<template>
  <!-- 试卷列表 -->
  <div>
    <h2 :style="{padding: '20px',margin: '10px'}">试卷详情</h2>
    <el-card class="box-card">
      <el-row :span="30">
        <el-col :span="8">
          <span>考试类型：</span>
          <el-select v-model="value.exam_id" placeholder="请选择">
            <el-option
              v-for="item in ExamType.data"
              :key="item.exam_id"
              :label="item.exam_name"
              :value="item.exam_id">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="8">
          <span>课程：</span>
          <el-select v-model="value.subject_id" placeholder="请选择">
            <el-option
              v-for="item in Subject.data"
              :key="item.subject_id"
              :label="item.subject_text"
              :value="item.subject_id">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="8">
          <el-button type="primary" icon="el-icon-search" @click="btn_search">搜索</el-button>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="box-card" :style="{marginTop:'50px'}">
    <el-table :header-cell-style="{background:'#eef1f6',color:'#606266'}" :data="examlist" style="width: 100%">
      <el-table-column prop="title" label="试卷信息" width="180"></el-table-column>
      <el-table-column prop="grade_name" label="班级" width="180"></el-table-column>
      <el-table-column prop="user_name" label="创建人"></el-table-column>
      <el-table-column prop="start_time" label="开始时间">
        <template slot-scope="scope">{{scope.row.start_time | timeFilter}}</template>
      </el-table-column>
      <el-table-column prop="end_time" label="结束时间">
        <template slot-scope="scope">{{scope.row.end_time | timeFilter}}</template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="120">
        <template slot-scope="scope">
          <el-button
            @click="handleClick(scope.row)"
            type="text"
            size="small"
          >详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    </el-card>
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from 'vuex'
export default {
  data() {
    return {
      value: {
        exam_id: '',
        subject_id: ''
      },
      exam_id: ''
    }
  },
  created () {
    this.getExam()
    this.getExamType()
    this.getSubject()
  },
  methods: {
    ...mapActions(['getExam', 'getExamType', 'getSubject', 'getCondition', 'getExamDetail']),
    ...mapMutations(['getExamListAll', 'getConditionAll']),
    btn_search () {
      this.getConditionAll(this.value)
      this.getCondition()
      // console.log(this.value)
    },
    handleClick (row) {
      // console.log(row.exam_exam_id)
      // this.ConditionAll(row.exam_exam_id)
      this.getExamDetail(row.exam_exam_id
      )
    }
  },
  computed: {
    ...mapState({
      examlist: (state) => state.GetExam.examlist,
      ExamType: (state) => state.GetExam.ExamType,
      Subject: (state) => state.GetExam.Subject,
      ExamDetail: (state) => state.GetExam.ExamDetail
    })
  }
}
</script>

<style>
</style>
